﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ComponentOne Invexplorer - Wijmo/KnockoutJS/jQueryUI sample</title>

    <!-- turn off IE's 'compatibility mode' to ensure HTML5 compatibility -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- jQuery/jQueryUI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" ></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <!-- Wijmo -->
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js" type="text/javascript" ></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js" type="text/javascript" ></script>

    <!-- KnockoutJS -->
    <script src="http://cdn.wijmo.com/external/knockout-2.0.0.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/knockout.wijmo.js" type="text/javascript"></script>
    <script src="scripts/knockout.jquery.js" type="text/javascript" ></script>

    <!-- ViewModel -->
    <script src="scripts/view-model.js" type="text/javascript"></script>
    <script src="scripts/portfolio.js" type="text/javascript"></script>
    <script src="scripts/portfolioItem.js" type="text/javascript"></script>
    <script src="scripts/company.js" type="text/javascript"></script>
    <script type="text/javascript">

        // initialize application on page load
        $(function () {

            // create ViewModel and apply bindings
            var vm = new ViewModel();
            ko.applyBindings(vm);

            // configure auto-complete control to render html instead of plain text
            // http://stackoverflow.com/questions/3488016/using-html-in-jquery-ui-autocomplete
            $("#autoComplete").autocomplete().data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.label + "</a>")
                        .appendTo(ul);
            };
        });

    </script>

    <!-- our styles (override jQueryUI) -->
    <link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>
        <img class="middle" src="resources/InvExplorerLogo.png" />
        ComponentOne Invexplorer
    </h1>

    <p>
        This application was implemented using 
            <a href="http://www.typescriptlang.org"><b>TypeScript</b></a> (typed, error-checked JavaScript), 
            <a href="http://knockoutjs.com"><b>KnockoutJS</b></a> (data binding, MVVM support), 
            <a href="http://jqueryui.com"><b>jQueryUI</b></a> (auto-complete control used to select new symbols),
            <a href="http://www.ibm.com/developerworks/opensource/library/os-jquerynewpart1/index.html"><b>jQuery/Globalize</b></a> (formatting numbers and dates),
            <a href="http://wijmo.com"><b>ComponentOne Wijmo</b></a> (chart control), and
            <a href="http://www.google.com/finance"><b>Google Finance</b></a> (inspiration).
    <p>
        The data displayed is obtained from <a href="http://finance.yahoo.com">Yahoo finance</a> services.
        Yahoo services are not free; they are being used here for demonstration purposes only.</p>

    <!-- portfolio table -->
    <table>
        <thead>
            <tr>
                <th class="left">Name</th>
                <th class="left">Symbol</th>
                <th class="left">Chart</th>
                <th class="right">Last Price</th>
                <th class="right">Change</th>
                <th class="right">Change %</th>
                <th class="right">Shares</th>
                <th class="right">Unit Cost</th>
                <th class="right">Value</th>
                <th class="right">Gain</th>
                <th class="right">Gain %</th>
                <th class="center">Delete</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: portfolio.items">
            <tr data-bind="style: { backgroundColor: chart() ? '#fcfcf0' : 'transparent' }">
                <td>
                    <span data-bind="style: { backgroundColor: color }">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;
                    <span data-bind="text: name"></span></td>
                <td data-bind="text: symbol"></td>
                <td class="center"><input data-bind="checked: chart" type="checkbox" /></td>
                <td class="right" data-bind="text: Globalize.format(lastPrice(), 'n2')"></td>
                <td class="right" data-bind="text: Globalize.format(change(), 'n2'), style: { color: $root.getAmountColor(change()) }"></td>
                <td class="right" data-bind="text: Globalize.format(changePercent(), 'p2'), style: { color: $root.getAmountColor(changePercent()) }"></td>
                <td><input class="numeric" data-bind="value: shares" /></td>
                <td><input class="numeric" data-bind="value: unitCost" /></td>
                <td class="right" data-bind="text: Globalize.format(value(), 'n2')"></td>
                <td class="right" data-bind="text: Globalize.format(gain(), 'n2'), style: { color: $root.getAmountColor(gain()) }"></td>
                <td class="right" data-bind="text: Globalize.format(gainPercent(), 'p2'), style: { color: $root.getAmountColor(gainPercent()) }"></td>
                <td class="center"><a class="hlink" data-bind="click: $root.portfolio.removeItem">x</a></td>
            </tr>
        </tbody>
    </table>

    <!-- add symbol -->
    <div class="addSymbol">
        Add Symbol: 

        <!-- jQueryUI autocomplete -->
        <input id="autoComplete" data-bind="
            value: portfolio.newSymbol,
            jqueryui: {
                widget: 'autocomplete',
                options: {

                    /* require two characters to start matching */
                    minLength: 2,

                    /* use ViewModel's getSymbolMatches to populate cdrop-down */
                    source: function(request, response) {
                        response(getSymbolMatches(request)) 
                    },

                    /* update current portfolio's newSymbol property when drop-down closes */
                    close: function() {
                        portfolio.newSymbol(this.value)
                    }
                }
            }" type="text" />
        
        <!-- add the selected symbol to the portfolio -->
        <button data-bind="click: function() { portfolio.addNewSymbol() }, enable: portfolio.canAddNewSymbol">
            Add to Portfolio
        </button>

        <!-- progress indicator (visible when ViewModel.updating > 0) -->
        <span class="floatRight" data-bind="visible: updating">
            <i> getting data...</i>
        </span>
    </div>

    <!-- links to select time span to be charted -->
    <div data-bind="visible: chartVisible">
        <a class="hlink" data-bind="click: function() { setMinDate(6) }">6m</a> 
        <a class="hlink" data-bind="click: function() { setMinDate(0) }">YTD</a> 
        <a class="hlink" data-bind="click: function() { setMinDate(12) }">1y</a> 
        <a class="hlink" data-bind="click: function() { setMinDate(24) }">2y</a> 
        <a class="hlink" data-bind="click: function() { setMinDate(36) }">3y</a> 
        <a class="hlink" data-bind="click: function() { setMinDate(1000) }">All</a> 
    </div>

    <!-- portfolio chart -->
    <div id="chart" data-bind="
        wijlinechart: { 

            /* bind series, styles */
            seriesList: chartSeries,
            seriesStyles: chartStyles,
            seriesHoverStyles: chartHoverStyles,

            /* more chart options */
            /* note: explore live at http://wijmo.com/demo/explore/#linechart|animation */

            /* axis label formats */
            axis: { 
                y: { annoFormatString : 'p0' },
                x: { annoFormatString : 'dd-MMM-yy' }
            },

            /* tooltip */
            hint: {
                content: function() {
                    return this.label + ' on ' + 
                            Globalize.format(this.x, 'dd-MMM-yy') + ':\n' + 
                            Globalize.format(this.y, 'p2');
                }
            },

            /* disable animations */
            animation: { enabled: false },
            seriesTransition: { enabled : false },

            /* configure chart */
            showChartLabels: false,
            width: 800, height: 250
        }">
    </div>
</body>
</html>
